import 'dart:io';

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_image.dart';
import '../../../utils/xin_he_input_widget.dart';
import 'xin_he_mine_real_name_auth_logic.dart';

class XinHeMineRealNameAuthPage extends StatelessWidget {
  XinHeMineRealNameAuthPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeMineRealNameAuthLogic());
  final state = Get.find<XinHeMineRealNameAuthLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text('实名认证',style: TextStyle(color:XinHeColor('#222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body:  logic.authModel.value.checkStatus == 'SUCCESS'
          ?  AbsorbPointer(child: Stack(children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _itemView('*姓名', logic.authModel.value.name??'', (data) { logic.nameChange(data);}),
            _itemView('*身份证号', logic.authModel.value.card??'', (data) { logic.idNumChange(data);}),
            // _itemView('*手机号', '请输入您的手机号', (data) { logic.shopContactPhoneChange(data);}),
            Stack(
              children: [
                Container(
                  width: Get.width,
                  height: 78.5,
                  color: Colors.white,
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('*手机号',style: TextStyle(color: XinHeColor('#454E4E'),fontSize: 14,fontWeight: FontWeight.w500),),
                      XinHeInputWidget('',logic.authModel.value.phone??'' , (value){logic.phoneNumChange(value);},isHiddenLine: true,keyboardType: TextInputType.phone,maxInputLength: 11,),

                    ],),

                ),
                Positioned(
                  bottom: 0,
                  left: 15,
                  child: Container(
                    width: Get.width-30,
                    height: 0.5,
                    color:XinHeStyle.lineColor
                    ,),
                )
              ],
            ),



            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 5),
              child: Text('*上传身份证照片',style: TextStyle(color: XinHeColor('#454E4E'),fontSize: 14,fontWeight: FontWeight.w500),),
            ),
            SizedBox(height: 10,),
            Row(children: [
              SizedBox(width: 15,),
              Column(
                children: [
                  GestureDetector(
                      onTap: (){
                        logic.selectedUpImage();
                      },
                      child:  XinHeNetImage(url: logic.authModel.value.certificateFront??'',width: Get.width*0.5-15-19,height: (Get.width*0.5-15-19)*99/145.0)),
                  const SizedBox(height: 8,),
                  Text('身份证正面',style: TextStyle(color: XinHeColor('#454E4E'),fontSize:13,fontWeight: FontWeight.w500 ),)

                ],
              ),
              SizedBox(width: 38,),
              Column(children: [
                GestureDetector(
                    onTap: (){
                      logic.selecteDownImage();
                    },
                    child: XinHeNetImage(url: logic.authModel.value.certificateBack??'',width: Get.width*0.5-15-19,height: (Get.width*0.5-15-19)*99/145.0)),
                SizedBox(height: 8,),
                Text('身份证反面',style: TextStyle(color: XinHeColor('#454E4E'),fontSize:13,fontWeight: FontWeight.w500 ),)

              ],)

            ],)




          ],),

        Positioned(
          bottom: 0,
          width: Get.width,
          height: 22+10+45+Get.mediaQuery.padding.bottom+25,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                color: Colors.transparent,
                height: 22,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    GestureDetector(
                      onTap: (){
                        logic.changeSelectedStatus();
                      },
                      child:Obx(() =>  Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 8,vertical: 4),
                        child:  XinHeAssetImage(state.selected.value ?'assets/images/login/login_selected.png':'assets/images/login/login_unselected.png',width: 14,height: 14,fit: BoxFit.fill),
                      )),
                    ),
                    // SizedBox(width: 3.w,),
                    RichText(
                      text: TextSpan(
                          children:
                          [


                            WidgetSpan(
                              child: GestureDetector(
                                // onTap: logic.toUserProtocolPage,
                                child: Text(
                                  '确认上述信息准确性及真实性并同意平台',
                                  style: TextStyle(
                                    color: XinHeColor("#8C8C8C"),
                                    fontSize: 14,
                                  ),
                                ),
                              ),
                            ),
                            WidgetSpan(
                              child: GestureDetector(
                                onTap: (){

                                },
                                child: Text(
                                  '《服务协议》',
                                  style: TextStyle(
                                    color: XinHeColor("#1CA6A1"),
                                    fontSize: 14,
                                  ),
                                ),
                              ),
                            ),

                          ]
                      ),
                    )

                  ],
                ),
              ),
              const SizedBox(height: 10,),
              GestureDetector(
                onTap: (){
                  logic.submitAction();
                },
                child: Container(
                  margin:  const EdgeInsets.only(left: 15,right: 14,top: 0),
                  height: 45,
                  width: double.infinity,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(color:  XinHeColor('#AAAAAA'),borderRadius: BorderRadius.all(Radius.circular(22.5))),
                  child: const Text (
                    "已认证",
                    style: TextStyle (fontSize: 16,color:  Colors.white,fontWeight: FontWeight.w600) ,
                  ),),
              ),
              SizedBox(height: Get.mediaQuery.padding.bottom+25,),
            ],),
        )
      ],),)
          : Stack(children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _itemView('*姓名', '请输入您的真实姓名', (data) { logic.nameChange(data);}),
            _itemView('*身份证号', '请输入您的身份证号码', (data) { logic.idNumChange(data);}),
            // _itemView('*手机号', '请输入您的手机号', (data) { logic.shopContactPhoneChange(data);}),
            Stack(
              children: [
                Container(
                  width: Get.width,
                  height: 78.5,
                  color: Colors.white,
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('*手机号',style: TextStyle(color: XinHeColor('#454E4E'),fontSize: 14,fontWeight: FontWeight.w500),),
                      XinHeInputWidget('','请输入您的手机号' , (value){logic.phoneNumChange(value);},isHiddenLine: true,keyboardType: TextInputType.phone,maxInputLength: 11,),

                    ],),

                ),
                Positioned(
                  bottom: 0,
                  left: 15,
                  child: Container(
                    width: Get.width-30,
                    height: 0.5,
                    color:XinHeStyle.lineColor
                    ,),
                )
              ],
            ),



            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 5),
              child: Text('*上传身份证照片',style: TextStyle(color: XinHeColor('#454E4E'),fontSize: 14,fontWeight: FontWeight.w500),),
            ),
            SizedBox(height: 10,),
            Row(children: [
              SizedBox(width: 15,),
              Column(
                children: [
                  GestureDetector(
                      onTap: (){
                        logic.selectedUpImage();
                      },
                      child: state.upImagePath.value.isNotEmpty?Image.file(File(state.upImagePath.value),width: Get.width*0.5-15-19,height: (Get.width*0.5-15-19)*99/145.0,): XinHeAssetImage('assets/images/mine/id_above.png',width: Get.width*0.5-15-19,height: (Get.width*0.5-15-19)*99/145.0)),
                  const SizedBox(height: 8,),
                  Text('身份证正面',style: TextStyle(color: XinHeColor('#454E4E'),fontSize:13,fontWeight: FontWeight.w500 ),)

                ],
              ),
              SizedBox(width: 38,),
              Column(children: [
                GestureDetector(
                    onTap: (){
                      logic.selecteDownImage();
                    },
                    child: state.downImagePath.value.isNotEmpty?Image.file(File(state.downImagePath.value),width: Get.width*0.5-15-19,height: (Get.width*0.5-15-19)*99/145.0,): XinHeAssetImage('assets/images/mine/id_above.png',width: Get.width*0.5-15-19,height: (Get.width*0.5-15-19)*99/145.0)),
                SizedBox(height: 8,),
                Text('身份证反面',style: TextStyle(color: XinHeColor('#454E4E'),fontSize:13,fontWeight: FontWeight.w500 ),)

              ],)

            ],)




          ],),

        Positioned(
          bottom: 0,
          width: Get.width,
          height: 22+10+45+Get.mediaQuery.padding.bottom+25,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                color: Colors.transparent,
                height: 22,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    GestureDetector(
                      onTap: (){
                        logic.changeSelectedStatus();
                      },
                      child:Obx(() =>  Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 8,vertical: 4),
                        child:  XinHeAssetImage(state.selected.value ?'assets/images/login/login_selected.png':'assets/images/login/login_unselected.png',width: 14,height: 14,fit: BoxFit.fill),
                      )),
                    ),
                    // SizedBox(width: 3.w,),
                    RichText(
                      text: TextSpan(
                          children:
                          [


                            WidgetSpan(
                              child: GestureDetector(
                                // onTap: logic.toUserProtocolPage,
                                child: Text(
                                  '确认上述信息准确性及真实性并同意平台',
                                  style: TextStyle(
                                    color: XinHeColor("#8C8C8C"),
                                    fontSize: 14,
                                  ),
                                ),
                              ),
                            ),
                            WidgetSpan(
                              child: GestureDetector(
                                onTap: (){

                                },
                                child: Text(
                                  '《服务协议》',
                                  style: TextStyle(
                                    color: XinHeColor("#1CA6A1"),
                                    fontSize: 14,
                                  ),
                                ),
                              ),
                            ),

                          ]
                      ),
                    )

                  ],
                ),
              ),
              const SizedBox(height: 10,),
              GestureDetector(
                onTap: (){
                  logic.submitAction();
                },
                child: Container(
                  margin:  const EdgeInsets.only(left: 15,right: 14,top: 0),
                  height: 45,
                  width: double.infinity,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(color:  XinHeColor('#10C9C9'),borderRadius: BorderRadius.all(Radius.circular(22.5))),
                  child: const Text (
                    "提交",
                    style: TextStyle (fontSize: 16,color:  Colors.white,fontWeight: FontWeight.w600) ,
                  ),),
              ),
              SizedBox(height: Get.mediaQuery.padding.bottom+25,),
            ],),
        )
      ],),

    ));
  }

  Widget _itemView(String title,String hintText,Function callback,{bool addLogo = false,bool isPhoneNum = false}){
    return Stack(
      children: [
        Container(
          width: Get.width,
          height: 78.5,
          color: Colors.white,
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(title,style: TextStyle(color: XinHeColor('#454E4E'),fontSize: 14,fontWeight: FontWeight.w500),),

              addLogo?const Padding(
                padding: EdgeInsets.symmetric(vertical: 7.5),
                child: XinHeAssetImage('assets/images/mine/seller_add.png',width:30,height: 30 ,),
              )
                  : XinHeInputWidget('', hintText, (value){callback(value);},isHiddenLine: true,),

            ],),

        ),
        Positioned(
          bottom: 0,
          left: 15,
          child: Container(
            width: Get.width-30,
            height: 0.5,
            color:XinHeStyle.lineColor
            ,),
        )
      ],
    );
  }


}
